<template>
  <div class="general-config-form">
    <el-tabs v-model="activeTab" class="config-tabs">
      <el-tab-pane
        v-for="(tab, index) in configData"
        :key="index + 1"
        :label="tab.tab_name"
        :name="index + 1"
        class="config-tab-pane"
      >
        <div
          class="flex-column-layout"
          :style="{
            '--column-count': columnCount,
            '--column-gap': '20px',
          }"
        >
          <div
            v-for="item in tab.data"
            :key="item.id"
            class="form-item-wrapper"
          >
            <el-form-item-plus
              :label="item.name"
              label-width="120px"
              label-position="top"
              :tooltipContent="item.remark"
            >
              <template v-if="item.type === 'input'">
                <el-input v-model="item.value" @change="changeHandle(item)" />
              </template>

              <template v-if="item.type === 'textarea'">
                <el-input
                  type="textarea"
                  v-model="item.value"
                  @change="changeHandle(item)"
                />
              </template>

              <template v-if="item.type === 'radio'">
                <ra-dict-select
                  v-model="item.value"
                  type="radio"
                  :code="item.config"
                  @change="changeHandle(item)"
                />
              </template>

              <template v-if="item.type === 'checkbox'">
                <ra-dict-select
                  v-model="item.value"
                  type="checkbox"
                  :code="item.config"
                  @change="changeHandle(item)"
                />
              </template>

              <template v-if="item.type === 'select_single'">
                <ra-dict-select
                  v-model="item.value"
                  type="select"
                  :code="item.config"
                  :multiple="false"
                  @change="changeHandle(item)"
                />
              </template>

              <template v-if="item.type === 'select_multiple'">
                <ra-dict-select
                  v-model="item.value"
                  type="select"
                  :code="item.config"
                  :multiple="true"
                  @change="changeHandle(item)"
                />
              </template>

              <template v-if="item.type === 'image_upload_single'">
                <ra-upload-card
                  v-model="item.value"
                  :multiple="false"
                  :limit="1"
                  @change="changeHandle(item)"
                />
              </template>

              <template v-if="item.type === 'image_upload_multiple'">
                <ra-upload-card
                  v-model="item.value"
                  :multiple="true"
                  :limit="6"
                  @change="changeHandle(item)"
                />
              </template>
            </el-form-item-plus>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
const emit = defineEmits(['change']);
const props = defineProps({
  configData: { type: Array, required: true },
  columnCount: { type: Number, default: 2 },
});
const changeHandle = (value) => {
  emit('change', value);
};
const activeTab = ref(1);
</script>

<style scoped>
.general-config-form,
.config-tabs,
.config-tab-pane {
  height: 100%; /* 【关键】层层继承高度 */
}
:deep(.el-tabs__content) {
  height: calc(100% - 40px); /* el-tabs 需要特殊处理，减去 tab 头的高度 */
}

.flex-column-layout {
  display: flex;
  flex-direction: column; /* 1. 主轴设为垂直 */
  flex-wrap: wrap; /* 2. 允许换列 */
  height: 100%; /* 3. 必须有明确的高度 */
  align-content: flex-start; /* 4. 从左上角开始填充 */
  gap: 0 var(--column-gap); /* 5. 设置列间距 */
  overflow-x: auto; /* 如果内容太多，允许横向滚动 */
}

.form-item-wrapper {
  /* 6. 计算每个项目的宽度 */
  width: calc(
    (100% - (var(--column-count) - 1) * var(--column-gap)) / var(--column-count)
  );
}
</style>
